<template>
	<xtable :pageSize="pageSize" @currentChange="currentChange" @sizeChange="sizeChange" paginationAlign="center" :total="total" pagination
		v-model:editRowIndex="editRowIndex" isEditRow @cancel="cancel" @confirm="confirm"
		elementLoadingBackground="rgba(0,0,0,.6)" elementLoadingText="加载中" :data="tableData" :options="options">
		<template #action="{scope}">
			<el-button @click="edit(scope)" type="primary">编辑</el-button>
			<el-button @click="del(scope)" type="danger">删除</el-button>
		</template>

		<template #editRow="{scope}">
			<el-button type="primary">确认</el-button>
			<el-button type="danger">取消</el-button>
		</template>

		<template #date="{scope}">
			<el-icon-timer></el-icon-timer>
			{{scope.row.date}}
		</template>

		<template #name="{scope}">
			<el-tag>{{scope.row.name}}</el-tag>
		</template>

		<!-- <template #editCell="{scope}">
			<div style="display: flex;">
				<el-button size="mini" type="primary">确认</el-button>
				<el-button size="mini">取消</el-button>
			</div>
		</template> -->
	</xtable>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import axios from 'axios'

	let tableData = ref([])
	let editRowIndex = ref('')

	let edit = scope => {
		editRowIndex.value = 'edit'
	}

	let del = scope => {
		editRowIndex.value = 'delete'
	}

	let confirm = scope => {}
	let cancel = scope => {}

	let current = ref(1)
	let pageSize = ref(5)
	let total = ref(0)

	let sizeChange = val => {
		pageSize.value = val
		getdata()
	}

	let currentChange = val => {
		current.value = val
		getdata()
	}

	let getdata = () => {
		axios.post('/api/list', {
			current: current.value,
			pageSize: pageSize.value
		}).then(res => {
			tableData.value = res.data.data.rows
			total.value = res.data.data.total
		})
	}

	onMounted(() => {
		getdata()
	})

	let options = [{
		label: '日期',
		prop: 'date',
		align: 'center',
		slot: 'date',
		editable: true
	}, {
		label: '姓名',
		prop: 'name',
		align: 'center',
		slot: 'name'
	}, {
		label: '地址',
		prop: 'address',
		align: 'center',
		editable: true
	}, {
		label: '操作',
		align: 'center',
		action: true
	}]
</script>

<style scoped>

</style>
